<template>
	<a-table ref="listRef" :rules="rules" :option="option" @subForm="subForm" @editHandle="editHandle">
		<template #default="type">
			<el-table-column label="标题"  min-width="100">
				<template #default="scope">
					<div class="line-2">{{scope.row.title}}</div>
				</template>
			</el-table-column>
			<el-table-column label="分类" width="180">
				<template #default="scope">
					<div v-for="(v,i) in type.typelist" :key="i">
						<span v-if="scope.row.type_id == v.type_id">{{v.name}}</span>
					</div>
				</template>
			</el-table-column>
		</template>
		
		<!-- 其他操作按钮 -->
		<template #but="data">
			<div>
				<a :href="config.domain+'/index/Index/news_details.html?id='+data.data.id" target="_blank">
					<el-button type="text" size="small">
						查看
					</el-button>
				</a>
			</div>
		</template>

		<!-- 表单 -->
		<template #form="data">
			<el-form-item label="标题：">
				<el-input v-model="data.form.title" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="小标题：">
				<el-input v-model="data.form.min_title" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="排序：">
				<el-input v-model="data.form.sort" placeholder="0最小，越大越靠前"></el-input>
			</el-form-item>
			<el-form-item label="摘要|简介：">
				<el-input v-model="data.form.abstract" :rows="3" type="textarea"  placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="seo关键词：">
				<el-input v-model.trim="data.form.keywords" :rows="3" type="textarea"  placeholder="请输入(选填)"></el-input>
			</el-form-item>
			<el-form-item label="seo描述：">
				<el-input v-model.trim="data.form.description" :rows="3" type="textarea"  placeholder="请输入(选填)"></el-input>
			</el-form-item>
		</template>
		
	</a-table>
	<aImgLocal
		:spaceValue="pickImg.spaceValue"
		v-model:show="pickImg.showLocal"
		:name="pickImg.name" 
		@img="imgSuccess">
	</aImgLocal>
</template>

<script setup>
	import aTable from "@/components/table/index.vue"
	import publicJS from "@/hook/public.js";
    const {config,api,ElMessage} = publicJS();

	const option = {
		name:'资讯',
		showAddBut:true,
		showEditBut:true,
		showExport:true,
		showEdit:true,
		showType:true,
		showCover:true,
		showDisable:true,
		activeWidth:150,
		getUrl:'a/News/list_data',
		delUrl:'a/News/del_data_a',
		getEditUrl:'a/News/get_detail_a'
	}
	
	const listRef = ref(null);

	//拖拽组件配置信息
	import draggable from "vuedraggable";
	const drag = false;
	const dragOptions = {
	  animation: 200,
	  group: "description",
	  disabled: false,
	  ghostClass: "ghost",
	};
	
	// 图片选择组件
	import useSelectImg from "@/hook/useSelectImg.js";
	const {aImgLocal,pickImg,selectImg,imgSuccess} = useSelectImg('local',res=>{

	});

	//页面数据
	const pageData = reactive({
		fileList: [],
	});

	//表单校验规则
	const rules = reactive({
		type: [{ required: true, message: '请输入选择分类', trigger: 'blur' }],
		title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
	})

	//获取表单数据 进行个性化页面数据处理
	const editHandle = (data)=>{
		if(data){
			listRef.value.editForm.form.type = data.type_id;
			listRef.value.editForm.form.image = data.cover;
		}else{
			let form = [
				{k:'min_title',v:''},
				{k:'abstract',v:''},
				{k:'video_url',v:''},
				{k:'addr',v:''},
				{k:'description',v:''},
				{k:'keywords',v:''},
				{k:'url_type',v:''},
				{k:'url_name',v:''},
				{k:'url_show',v:''},
				{k:'url',v:''},
				{k:'share_img',v:''},
				{k:'share_title',v:''},
				{k:'sort',v:''},
				{k:'type',v:1},
			]
			form.forEach(data => {
				listRef.value.editForm.form[data.k] = data.v;
			})
		}
	}
	
	const subForm = (data)=>{
		listRef.value.ruleFormRef.validate((valid, fields) => {
			if (valid) {
				if(!data?.content)return ElMessage.error('请输入详细内容')
				if(!data?.sort)data.sort = 0;
				data.cover = pageData.fileList.join(",");//数组逗号链接 转成 字符串数据
				data.type_id = listRef.value.editForm.form.type;
				let url = "a/News/add_data_a";
				if (data?.id) url = "a/News/updata_a"
				api.post(url, data).then(r => {
					listRef.value.searchFun()
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}
</script>

<style lang="scss" scoped>
  .c8 {
    margin-right: 10px;
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
  }
  
  .c8:hover {
    border-color: var(--el-color-primary);
    cursor: pointer;
  }
  
  .c8:hover .c10 {
    opacity: 1;
  }
  
  .c8 img {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .c9 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .c10 {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    width: 100%;
    background: var(--el-color-primary);
    opacity: 0;
    transition: 0.3s;
    text-align: center;
    color: #fff;
    line-height: 30px;
  }

	.c16 {
		border: 1px dashed #d9d9d9;
		height: 240px;
		width: 300px;
		cursor: pointer;
		text-align: center;
		line-height: 240px;
	}
	
	.c16 .iconfont {
		font-size: 36px;
		color: #888;
	}
	
	.c16:hover {
		border-color: var(--el-color-primary);
	}
	
	.c16 img {
		width: 100%;
		height: 100%;
	}
</style>